<template>
    <div>
        <a-modal
        :dialog-style="{ top: '20px' }"
         v-model:visible="visible" 
         :title="formState.id?(formState.view?'查看使用车间':'编辑使用车间'):'新增使用车间'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="workshopAddEdit-modal"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible">
                <a-divider v-if="!currentData.view">填写生产环节</a-divider>
                <a-divider v-if="currentData.view">生产环节详情</a-divider>
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="工序环节名称">
                        <span v-if="currentData.view">{{ formState.fgxhjmc }}</span>
                        <a-select
                            v-else
                            ref="select"
                            placeholder="请选择工序环节名称"
                            v-model:value="formState.fgxhjmc"
                            v-decorator="[
                                'fgxhjmc', { initialValue:formState.fgxhjmc, rules: rules.fgxhjmc}
                            ]"
                            >
                            <a-select-option v-for="(item,index) in gxList" :value="item.itemValue">{{ item.itemText }}</a-select-option>
                        </a-select>
                        <!-- <a-input
                        v-else
                        v-model:value="formState.fgxhjmc"
                        placeholder="请输入工序环节名称"
                        v-decorator="[
                            'fgxhjmc', { initialValue:formState.fgxhjmc, rules: rules.fgxhjmc}
                        ]"/> -->
                    </a-form-item>
                    <a-form-item label="使用开始时间">
                        <span v-if="currentData.view">{{ moment(formState.fsykssj).format('YYYY-MM-DD HH:mm:ss') }}</span>
                        <a-date-picker
                            v-else
                            show-time
                            v-model:value="formState.fsykssj"
                            placeholder="请选择使用开始时间"
                            v-decorator="[
                                'fsykssj', { initialValue:formState.fsykssj, rules: rules.fsykssj}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="使用结束时间">
                        <span v-if="currentData.view">{{ moment(formState.fsyjssj).format('YYYY-MM-DD HH:mm:ss') }}</span>
                        <a-date-picker
                            v-else
                            show-time
                            v-model:value="formState.fsyjssj"
                            placeholder="请选择使用结束时间"
                            v-decorator="[
                                'fsyjssj', { initialValue:formState.fsyjssj, rules: rules.fsyjssj}
                            ]"
                        />
                    </a-form-item>
                </a-form>
                <a-divider v-if="!currentData.view">选择生产车间</a-divider>
                <a-divider v-if="currentData.view">已选生产车间</a-divider>
                <commpVxeTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi.spcyQyInfoquerySccjPageList,
                        rowId: 'id',
                        paramet:{
                            fqyid:currentData.fqyid,
                            id:currentData.view?formState.fsccjid:'',
                        },
                        autoHidden:currentData.view?true:false,
                    }" 
                    :selectItem="selectItem"
                    :columns="directoryColumnsVxe" 
                    :formItem="currentData.view?[]:directoryFormItem"
                    :occupancyHeight="230"
                    @radioChange="commpVxeTableRadioChange"
                > 
                </commpVxeTable>
            </div>
            <div v-if="!currentData.view" style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import { 
    spcyQyInfoupdateScjlSycj,
    spcyQyInfoaddScjlSycj,
    ocalityPostAction,
} from '../service/index'
import assessCheckApi from '../service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import moment from 'moment'
export default {
    components:{
        compSelector,
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            assessCheckApi:assessCheckApi,
            refreshTable:null,
            visible:false,
            formState:{},
            currentData:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fgxhjmc: [{
                    required: true,
                    message: '请输入工序环节名称',
                    trigger: 'blur',
                }],
                fsykssj: [{
                    type:'object',
                    required: true,
                    message: '请选择使用开始时间',
                    trigger: 'blur',
                }],
                fsyjssj: [{
                    type:'object',
                    required: true,
                    message: '请选择使用结束时间',
                    trigger: 'blur',
                }],
                
            },
            materialUnitList:[],
            selectItem:{
                selectArr:[],
                key:'id',
            },
            directoryFormItem:[{
                label: '车间编号',
                model: 'fcjbh',
            },{
                label: '车间名称',
                model: 'fcjmc',
            }],
            directoryColumnsVxe:[{ 
                type: 'radio', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '车间编号',
                field: 'fcjbh',
            },{
                title: '车间名称',
                field: 'fcjmc',
            },{
                title: '负责人',
                field: 'ffzr',
            },{
                title: '区域分类',
                field: 'fqyfl',
            },{
                title: '投用时间',
                field: 'ftysj',
            }],
            gxList:[],
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val,row){
            //console.log(val)
            this.formState = {}
            this.currentData = val
            this.formState = {fscjlid:val.fscjlid,...row}
            this.formState['fsykssj'] = row['fsykssj']?moment(row.fsykssj):''
            this.formState['fsyjssj'] = row['fsyjssj']?moment(row.fsyjssj):''
            if(row.fsccjid){
                this.selectItem['selectArr'][0] = row.fsccjid
            }
            ocalityPostAction({dictName:'企业生成记录工序环节'}).then(res=>{
                if(res.code == 200){
                    if(res.result.length){
                        this.gxList = res.result
                    }
                    
                }
            })
            this.refreshTable = Date.now()
        },
        commpVxeTableRadioChange({row}){
            //console.log(row)
            this.formState.fsccjid = row.id
        },
        handleOk(val){
            if(!this.formState.fsccjid){
                this.$message.warning('请选择生产车间')
                return
            }
            this.form.validateFields((err, values) => {
                if (!err) {
                    let data = {
                        ...this.formState,
                        ...values,
                        fsykssj:moment(this.formState.fsykssj).format('YYYY-MM-DD HH:mm:ss'),
                        fsyjssj:moment(this.formState.fsyjssj).format('YYYY-MM-DD HH:mm:ss'),
                    }
                    if(this.formState.id){
                        spcyQyInfoupdateScjlSycj(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.$emit('workshopSuccess')
                                this.visible = false
                                
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                        // this.$emit('editItem',{...this.formState,...values},val)
                    }else{
                        spcyQyInfoaddScjlSycj(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.$emit('workshopSuccess')
                                this.visible = false
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                        // this.$emit('addItem',{...this.formState,...values},val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.workshopAddEdit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 10px;
        }
        .ant-form-item-label{
            width: 105px;
        }
        .ant-form-item-control-wrapper{
            width: 198px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>